<template>
  <div class="b-home">
    <div class="input_style">
      <input type="text" v-model="contentq" />
    </div>
    <div class="img_style" @click="goPhoto" id="upload">
      <svg
        t="1620369239590"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="7823"
        width="300"
        height="300"
      >
        <path
          d="M512 4C231.9 4 4 231.9 4 512s227.9 508 508 508 508-227.9 508-508S792.1 4 512 4z m0 971.8C256.3 975.8 48.2 767.7 48.2 512S256.3 48.2 512 48.2 975.8 256.3 975.8 512 767.7 975.8 512 975.8zM774.2 512c0 12.2-9.9 22.1-22.1 22.1h-218v218c0 12.2-9.9 22.1-22.1 22.1-12.2 0-22.1-9.9-22.1-22.1v-218h-218c-12.2 0-22.1-9.9-22.1-22.1 0-12.2 9.9-22.1 22.1-22.1h218v-218c0-12.2 9.9-22.1 22.1-22.1 12.2 0 22.1 9.9 22.1 22.1v218h218c12.2 0 22.1 9.9 22.1 22.1z"
          p-id="7824"
        ></path>
      </svg>
    </div>
    <div class="button_style"><button @click="send">发送</button></div>
  </div>
</template>
<script>
export default {
  props: {
    content: "",
  },
  data() {
    return {
      contentq: this.content,
    };
  },
  model: {
    props: "content",
    event: "changeDate",
  },
  methods: {
    goPhoto() {
      alert('我是相机')
    },
    send() {
      this.$emit("changeDate", this.contentq);
    },
  },
};
</script>

<style lang='scss' scoped>
.b-home {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  z-index: 100;
  background: #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
  .input_style {
    margin-left: 20px;
    width: 75%;
  }
  .img_style {
    width: 10%;
  }
  .button_style {
    width: 15%;
    margin-right: 20px;
  }
  input {
    width: 90%;
    height: 30px;
    border: 0px;
  }
}
</style>